<template>
  <Modal v-model="modal2" width="360" @on-cancel="cancel">
    <p slot="header" style="text-align: center">
      <!-- <Icon type="ios-information-circle"></Icon> -->
      <span>修改顾客信息</span>
    </p>
    <div style="text-align: center">
      <Form
        ref="formValidate"
        :model="formValidate"
        :label-width="80"
      >
        <FormItem label="顾客号" prop="cid">
          <Input v-model="formValidate.cid" disabled placeholder="输入顾客号"></Input>
        </FormItem>
        <FormItem label="姓名" prop="name">
          <Input v-model="formValidate.name" placeholder="输入姓名"></Input>
        </FormItem>
        <FormItem label="手机号" prop="phone">
          <Input v-model="formValidate.phone" placeholder="手机号"></Input>
        </FormItem>
        <FormItem label="性别" prop="sex">
          <RadioGroup v-model="formValidate.sex">
            <Radio label="true" disabled>男</Radio>
            <Radio label="false" disabled>女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="地址" prop="address">
          <Cascader
                :data="dataregion"
                v-model="valuec"
                filterable
                placeholder="请选择地址"
                @on-change="ccid"
              ></Cascader>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button
        type="success"
        size="large"
        long
        :loading="modal_loading"
        @click="submit"
        >提交修改</Button
      >
    </div>
  </Modal>
</template>
<script>
export default {
    props:{
        flag:Boolean,
        datas:Object
    },
  data() {
    return {
      dataregion: [],
      modal2: this.flag,
      modal_loading: false,
      formValidate:this.datas,
      valuec:[]
    };
  },
  mounted(){
    this.axios
      .get("/api/region")
      .then((r) => {
        this.dataregion = r.data;
      })
      .catch((E) => {
        this.$Message.error("e" + E);
      });
  },
  methods: {
    submit() {
      this.modal_loading = true;
      this.axios.put('/api/customer',this.formValidate).then((r)=>{
          this.$Message.info(r.data)
          if(r.data=="修改成功"){
              this.$emit("sucess",this.formValidate)
          }
        this.modal_loading = false;
      }).catch((e)=>{
          this.$Message.error("e"+e)
      })
    //   setTimeout(() => {
    //     this.modal_loading = false;
    //     this.modal2 = false;
    //     this.$Message.success("Successfully delete");
    //   }, 2000);
    },
    cancel(){
        this.$emit("changes",false)
    },
    ccid(value){
      var format_address=""
      for(var i in value){
        var item =value[i]
        if(i>0)format_address+="-"
          format_address+=item
      }
      this.formValidate.address=format_address
      console.log(format_address)
    }
  },
  watch:{
      flag(nd){
          this.modal2=nd
      },
      datas:{
          handler(nd){
              this.formValidate=nd
              // console.log(this.formValidate)
              // console.log(nd)
              
          },
          deep:true
      }
  }
};
</script>
